<template>
  <img
    :src="`${VITE_SITE_URL}/wechat/miniprogram/static/login_box_gb2.png`"
    alt=""
    class="page-bg"
  />
  <view class="page-content">
    <view :style="{ 'margin-top': menuButtonTop }" class="status-bar">
      <view>
        <u-icon
          name="arrow-left"
          size="40"
          color="#fff"
          @click="toHome"
        ></u-icon>
      </view>
    </view>
    <view class="login-enter">
      <view class="system-name">
        <img
          :src="`${VITE_SITE_URL}/wechat/miniprogram/static/logo.png`"
          class="logo-img"
        />
        <view class="system-name">{{ VITE_APP_TITLE }}</view>
      </view>
      <view>
        <u-input
          v-model="loginForm.phone"
          type="number"
          :border="border"
          clearable
          trim
          height="90"
          placeholder="请输入手机号码"
        />
      </view>
      <view class="u-m-t-40">
        <u-field
          :border-bottom="false"
          v-model="loginForm.code"
          label-width="0"
          label=""
          placeholder-style="color:#c0c4cc"
          placeholder="请输入短信验证码"
        >
          <view class="sms-code-button" slot="right" @click="getCode">
            <span v-if="!sendFlag">获取验证码</span>
            <span v-else>{{ deadline2 }}</span>
          </view>
        </u-field>
      </view>
      <view class="u-m-t-80">
        <u-button
          type="primary"
          shape="circle"
          :loading="loading"
          :customStyle="customStyle"
          @click="submit"
          >登录</u-button
        >
      </view>
      <view class="u-m-t-40 account-login" @click="gotoclick('account')"
        >账号密码登录</view
      >
    </view>
  </view>
</template>
<script lang="ts" setup>
import { sendSmsCode, bindWxUser } from '@/api/modules/user';
import { useUserStore } from '@/stores/user';
import { onLoad } from '@dcloudio/uni-app';
import { getEnvValue } from '@/utils/env';

const { VITE_APP_TITLE, VITE_SITE_URL, VITE_APPID } = getEnvValue<any>([
  'VITE_APP_TITLE',
  'VITE_SITE_URL',
  'VITE_APPID',
]);

const userStore = useUserStore();
const loginForm = reactive({
  phone: '',
  username: '',
  grant_type: 'sms',
  code: '',
});
const loading = ref(false);
const deadline2 = ref(60);
const customStyle = {
  height: '90rpx',
};
const menuButtonTop = ref('0px');
const getCapsule = () => {
  //获取胶囊位置并改变顶部自定义导航栏的位置
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  //让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
  menuButtonTop.value = menuButtonInfo.top + 'px';
};
const toHome = () => {
  (uni as any).$Router.back();
  // uni.navigateTo({
  //   url: '/pages/index/index',
  // });
};
const border = ref(false);

const sendFlag = ref(false);
const getCode = () => {
  if (!loginForm.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  const params = {
    phone: loginForm.phone,
  };
  sendSmsCode(params).then(() => {
    sendFlag.value = true;
    deadline2.value = 60;
    countDown();
    uni.showToast({
      title: '验证码已发送，请注意查收',
      icon: 'none',
      duration: 2000,
    });
  });
};
const gotoclick = (name: any, type = 'push') => {
  if (type === 'push') {
    (uni as any).$Router.push({
      name,
      params: {
        phone: loginForm.phone,
      },
    });
  } else {
    (uni as any).$Router.switchTab({
      name,
    });
  }
};

const timer = ref();
const countDown = () => {
  if (timer.value) {
    clearInterval(timer.value);
  }
  timer.value = setInterval(() => {
    if (deadline2.value === 0) {
      clearInterval(timer.value);
      sendFlag.value = false;
      return;
    }
    deadline2.value -= 1;
  }, 1000);
};
const submit = async () => {
  if (!loginForm.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  if (!loginForm.code) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  loginForm.username = loginForm.phone;
  loading.value = true;
  try {
    await userStore.login({ ...toRaw(loginForm) });
    wx.login({
      success: (code: any) => {
        bindWxUser({
          code: code.code,
          appid: VITE_APPID,
          phoneNumber: loginForm.username,
        });
      },
    });
    uni.showToast({
      title: '登录成功',
      icon: 'none',
      duration: 2000,
    });
    // 获取地址里面的重定向地址
    gotoclick('home', 'switchTab');
  } finally {
    loading.value = false;
  }
};
onLoad(() => {
  getCapsule();
  const { phone } = (uni as any).$Router.getQuery();
  if (phone) {
    loginForm.phone = phone;
  }
});
</script>
<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.page-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.page-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.text-white {
  color: #fff;
}
.system-name {
  margin-bottom: 100rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bolder;
  color: $u-main-color;

  .logo-img {
    width: 206rpx;
    height: 146rpx;
    display: block;
    margin: 0 auto;
    margin-bottom: 20rpx;
  }
  .app-name {
    vertical-align: middle;
  }
}
.login-enter {
  // height: 300rpx;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  padding: 0 100rpx;
  transform: translateY(-50%);

  .u-input {
    border-radius: 50rpx !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 0 36rpx !important;

    .u-input__right-icon {
      .u-icon__icon {
        font-size: 36rpx !important;
      }
    }
  }
  .u-field {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 45rpx !important;
  }
}
.forget-pswd {
  width: 100%;
  position: absolute;
  bottom: 40rpx;
  left: 0;
  text-align: center;
}
.register {
  width: 100%;
  text-align: center;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100rpx;
  // font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.account-login {
  color: $u-type-primary;
  text-align: right;
  text-decoration: underline;
}
.sms-code-button {
  color: #0177fd;
}
</style>
